<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绘制扇形统计图</title>
	<style>
		canvas {
			border: solid 1px #dddddd;
			display: block;
			margin: auto;
		}
	</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
	/*绘制扇形统计图（面向对象的思维）
     * 1.绘制扇形
     * 2.绘制标题
     *3. 绘制说明*/
	var PieChart = function (ctx) {
		//绘制工具
		this.ctx = ctx || document.querySelector('canvas').getContext('2d');
		//绘制饼图的中心;
		this.w = this.ctx.canvas.width;
		this.h = this.ctx.canvas.height;
		this.x0 = this.w / 2 + 60;
		this.y0 = this.h / 2;
		//饼图半径
		this.radius = 150;
		//标题伸出距离圆心的距离
		this.outline = 15;
		//说明矩形的宽和高
		this.rectW = 30;
		this.rectH = 16;
		this.space = 20;

	};
	PieChart.prototype.init = function (data) {
		this.drawPie(data);
	};
	PieChart.prototype.drawPie = function (data) {
		var that = this;
		//将角度转化为弧度
		var newData = this.transFormData(data);
		//绘制饼状图
		var startAngle = 0;
		newData.forEach(function (item, i) {
			var endAngle = startAngle + item.angle;
			that.ctx.beginPath();
			that.ctx.moveTo(that.x0, that.y0);
			that.ctx.arc(that.x0, that.y0, that.radius, startAngle, endAngle);
			//添加随机颜色
			var color = that.ctx.fillStyle = that.getRandomColor();
			that.ctx.fill();

			//调用画标题的方法.
			that.drawTitle(startAngle, item.angle, color, item.title);
			//调用画说明的方法
			that.drawDesc(i, item.title);


			//将下一次的起始值设为本次绘画的结束值
			startAngle = endAngle;


		});


	};
	PieChart.prototype.drawTitle = function (startAngle, angle, color, text) {
		/*需要先找到伸出点的坐标
         * 1.计算出斜边相对于圆点的坐标*/
		var edge = this.radius + this.outline;
		var edgeX = edge * Math.cos(startAngle + angle / 2);
		var edgeY = edge * Math.sin(startAngle + angle / 2);

		//伸出点的坐标
		var outX = this.x0 + edgeX;
		var outY = this.y0 + edgeY;

		//画线
		this.ctx.beginPath();
		this.ctx.moveTo(this.x0, this.y0);
		this.ctx.lineTo(outX, outY);
		this.ctx.strokeStyle = color;
		this.ctx.stroke();
		//画底部线;
		//字体大小
		this.ctx.font = "14px Microsoft YaHei";
		this.ctx.textBaseline = "bottom";
		var textWidth = this.ctx.measureText(text).width;
		if (outX > this.x0) {
			this.ctx.textAlign = 'left';
			this.ctx.lineTo(outX + textWidth, outY);
		} else {
			this.ctx.textAlign = 'right';
			this.ctx.lineTo(outX - textWidth, outY);
		}

		this.ctx.stroke();
		//画文字
		this.ctx.fillText(text, outX, outY);


	};
	PieChart.prototype.drawDesc = function (index, title) {
		/*画说明矩形*/
		this.ctx.fillRect(this.space, this.space + index * (this.space + 10), this.rectW, this.rectH);
		/*画说明内容*/
		this.ctx.beginPath();
		this.ctx.textAlign="left";
		this.ctx.textBaseline='top';
		this.ctx.fillText(title, this.space+this.rectW + 10, this.space + index * (this.space + 10));
	};
	//得到一个随机的颜色
	PieChart.prototype.getRandomColor = function () {
		var r = Math.floor(Math.random() * 256);
		var g = Math.floor(Math.random() * 256);
		var b = Math.floor(Math.random() * 256);
		return 'rgb(' + r + ',' + g + ',' + b + ')';
	};
	//将数据的需要统计的数据转换成弧度，并返回该数据
	PieChart.prototype.transFormData = function (data) {
		var total = 0;
		data.forEach(function (item, i) {
			total += item.num;
		});
		//计算出角度并添加一个属性记录角度
		data.forEach(function (item, i) {
			var angle = item.num / total * Math.PI * 2;
			item.angle = angle;
		});
		return data;
	};
	var data = [
		{title: '数计学院', num: 432},
	{title: '音乐学院', num: 200},
	{title: '经法学院', num: 189},
	{title: '体育学院', num: 385},
	{title: '文旅学院', num: 199}
	];
	//实例化对象，并调用该对象的初始化方法
	var pieChart = new PieChart();
	pieChart.init(data);
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
	$(function() {
		//微信分享
		$.ajax({
			"url":"https://www.cashboard.in/index.html",  //接口地址
			"type":"Get",
			"dataType":"json",
			"data":{"url": window.location.href},
			"success":function(data){
				wxstart(data, "");
			}
		});
	});

	function wxstart(data, url){
		var url = 'https://www.cashboard.in/index.html';  //分享的文章地址
		var appId = data.appId;
		var timestamp = data.timestamp;
		var nonceStr = data.nonceStr;
		var signature = data.signature;
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: appId, // 必填，公众号的唯一标识
			timestamp: timestamp, // 必填，生成签名的时间戳
			nonceStr: nonceStr, // 必填，生成签名的随机串
			signature: signature,// 必填，签名，见附录1
			jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});

		wx.ready(function(){
			var imgurl = 'https://' + window.location.hostname + '/static/customerHtml/img/weixinshare.jpg';
			var title = '';
			var desc = '';
			wx.onMenuShareTimeline({
				title: title, // 分享标题
				desc: desc, // 分享描述
				link: url, // 分享链接
				imgUrl: imgurl, // 分享图标
				success: function () {
					// 用户确认分享后执行的回调函数
				},
				cancel: function () {
					// 用户取消分享后执行的回调函数
				}
			});

			wx.onMenuShareAppMessage({
				title: title, // 分享标题
				desc: desc, // 分享描述
				link: url, // 分享链接
				imgUrl: imgurl, // 分享图标
				type: '', // 分享类型,music、video或link，不填默认为link
				dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
				success: function () {
					// 用户确认分享后执行的回调函数
				},
				cancel: function () {
					// 用户取消分享后执行的回调函数
				}
			});

			wx.onMenuShareQQ({
				title: title, // 分享标题
				desc: desc, // 分享描述
				link: url, // 分享链接
				imgUrl: imgurl, // 分享图标
				success: function () {
					// 用户确认分享后执行的回调函数
				},
				cancel: function () {
					// 用户取消分享后执行的回调函数
				}
			});
		});
	}
</script>

</body>
</html>